<template>
  <div>
    <video
      autoplay
      ref="videoMedia"
      playsinline
      style="width: 100%; height: 200px; object-fit: contain"
      controls
    ></video>
    <video
      autoplay
      ref="remoteVideo"
      playsinline
      style="width: 100%; height: 200px; object-fit: contain"
      controls
    ></video>
    <button
      @click="getUserMedia"
      class="dark:text-white border border-solid dart:border-red-50 border-red-400 rounded-sm max-w-sm"
    >
      打开摄像头
    </button>
    <button
      @click="createVideo"
      class="dark:text-white border border-solid dart:border-red-50 border-red-400 rounded-sm max-w-sm"
    >
      开始直播
    </button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRtcFIle } from './rtcVideo'
const videoMedia = ref()
const remoteVideo = ref()
const { createOffer, pc } = useRtcFIle('https://192.168.50.206', 'fanjiantao')

pc.ontrack = (e) => {
  console.log(e, '拉流数据')
  remoteVideo.value.srcObject = e.streams[0]
  remoteVideo.value.play()
  // logger('pc.ontrack', e.streams[0])
}
const getUserMedia = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      width: 1920,
      height: 1080,
      facingMode: { exact: 'environment' }
    }
  })
  stream.getTracks().forEach((track) => {
    pc.addTrack(track, stream)
  })
  videoMedia.value.srcObject = stream
}

const createVideo = () => {
  createOffer()
}
</script>
